<template>
  <!-- vue3页面 -->
  <section>
    <a-row style="margin-bottom: 20px">
      <a-col span="7">
        <a-col>
          <div class="bar HeaderBordr setEchart" style="margin-bottom: 20px">
            <div style="width: 100%; height: 310px">
              <MyEchart :options="proposlTypeOption" ref="proposlTypeRef" />
            </div>
            <div class="footerBorder footer setEchart"></div>
          </div>
          <div class="bar HeaderBordr setEchart" style="margin-bottom: 20px">
            <div style="width: 100%; height: 310px">
              <MyEchart :options="proposlOption" ref="proposlResultRef" />
            </div>
            <div class="footerBorder footer setEchart"></div>
          </div>
          <div class="bar HeaderBordr setEchart" style="margin-bottom: 20px">
            <div style="display: flex">
              <div style="width: 50%; height: 310px">
                <MyEchart :options="sex" ref="sexRef" />
              </div>
              <div style="width: 50%; height: 310px">
                <MyEchart :options="member" ref="memberRef" />
              </div>
            </div>
            <div class="footerBorder footer setEchart"></div>
          </div>
        </a-col>
      </a-col>
      <a-col span="10" style="padding: 0 10px">
        <div class="content">
          <div class="border borderP">
            <div class="content-number" style="color: #ffeb7b">9898</div>
            <a-divider class="divider" type="vertical" />
            <div class="content-number" style="color: #b7eb8f">22</div>
            <a-divider class="divider" type="vertical" />
            <div class="content-number" style="color: #87e8de">5555</div>
            <a-divider class="divider" type="vertical" />
            <div class="content-number" style="color: #91d5ff">132</div>
          </div>
          <div class="title borderP">
            <div class="title-text" style="color: #ffeb7b">职工人数</div>
            <a-divider class="divider" type="vertical" />
            <div class="title-text" style="color: #b7eb8f">分工会个数</div>
            <a-divider class="divider" type="vertical" />
            <div class="title-text" style="color: #87e8de">会员人数</div>
            <a-divider class="divider" type="vertical" />
            <div class="title-text" style="color: #91d5ff">荣誉项数</div>
          </div>
        </div>
        <div></div>
        <div class="number-card">
          <div class="number-text">
            <div class="number-text-item">22<i class="noNumber">个</i></div>
            <div class="number-text-item" style="margin: 10px 0">
              630<i class="noNumber">人</i>
            </div>
            <div
              class="number-text-item"
              style="font-size: 14px; color: #e6fffb"
            >
              代表团
            </div>
          </div>
          <div class="number-text">
            <div class="number-text-item">12<i class="noNumber">个</i></div>
            <div class="number-text-item" style="margin: 10px 0">
              330<i class="noNumber">人</i>
            </div>
            <div
              class="number-text-item"
              style="font-size: 14px; color: #e6fffb"
            >
              社团
            </div>
          </div>
          <div class="number-text">
            <div class="number-text-item">122<i class="noNumber">人</i></div>
            <div class="number-text-item" style="margin: 10px 0">
              63000900<i class="noNumber">元</i>
            </div>
            <div
              class="number-text-item"
              style="font-size: 14px; color: #e6fffb"
            >
              慰问
            </div>
          </div>
          <div class="number-text">
            <div class="number-text-item">50<i class="noNumber">件</i></div>
            <div class="number-text-item" style="margin: 10px 0">
              20000<i class="noNumber">元</i>
            </div>
            <div
              class="number-text-item"
              style="font-size: 14px; color: #e6fffb"
            >
              固定资产
            </div>
          </div>
        </div>
        <div class="mian" v-show="tabIndex === 0">
          <div class="rullData">
            <div class="title">热门资讯</div>
            <div class="list-tab">
              <div style="width: 80px; margin-right: 50px">资讯时间</div>
              <div style="margin-right: auto">资讯标题</div>
              <div style="width: 70px">资讯编号</div>
            </div>
            <div class="container" ref="rollBox">
              <ul class="list" ref="roll">
                <li class="item" ref="item" v-for="i in 20">
                  <div style="width: 80px; margin-right: 50px">2023-10-29</div>
                  <div style="margin-right: auto">
                    {{ `${i}这是一条资讯这是一条资讯这是一条资讯` }}
                  </div>
                  <div style="width: 70px">{{ `A${i}0009` }}</div>
                </li>
              </ul>
              <!-- <ul class="lbBox" ref="roll">
                <li class="lbItem" ref="item" v-for="i in 20">
                  <div>
                    <img src="../../assets/echart/lb.png" class="img" alt="" />
                  </div>
                </li>
              </ul> -->
            </div>
          </div>
        </div>
        <div v-if="tabIndex === 1" class="main">
          1231
          <MyMessage />
        </div>
        <div class="select-tab">
          <div class="select-icon select-tab-item" @click="tabIndex = 0">
            <a class="text" href="javascripy:;">动态要闻</a>
          </div>
          <div class="select-icon select-tab-item" @click="tabIndex = 1">
            <a class="text" href="javascripy:;">消息通知</a>
          </div>
          <div class="select-icon select-tab-item">
            <a class="text" href="javascripy:;">优秀提案</a>
          </div>
          <div class="select-icon select-tab-item">
            <a class="text" href="javascripy:;">创新成果</a>
          </div>
          <div class="select-icon select-tab-item">
            <a class="text" href="javascripy:;">工会活动</a>
          </div>
          <div class="select-icon select-tab-item">
            <a class="text" href="javascripy:;">工会列表</a>
          </div>
          <div class="select-icon select-tab-item">
            <a class="text" href="javascripy:;">领导信息</a>
          </div>
        </div>
      </a-col>
      <a-col span="7">
        <a-col>
          <div class="bar HeaderBordr setEchart" style="margin-bottom: 20px">
            <div style="width: 100%; height: 310px">
              <MyEchart :options="condoleOption" ref="condoleRef" />
            </div>
            <div class="footerBorder footer setEchart"></div>
          </div>
          <div class="bar HeaderBordr setEchart" style="margin-bottom: 20px">
            <div style="width: 100%; height: 310px">
              <MyEchart :options="workCondole" ref="workCondoleRef" />
            </div>
            <div class="footerBorder footer setEchart"></div>
          </div>
          <div class="bar HeaderBordr setEchart" style="margin-bottom: 20px">
            <div style="display: flex">
              <div style="width: 50%; height: 310px">
                <MyEchart :options="activity" ref="activityRef" />
              </div>
              <div style="width: 50%; height: 310px">
                <MyEchart :options="union" ref="unionRef" />
              </div>
            </div>
            <div class="footerBorder footer setEchart"></div>
          </div>
        </a-col>
      </a-col>
    </a-row>
  </section>
  <div class="box"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, shallowRef, onUnmounted } from "vue";
import MyMessage from "./components/message.vue";
import MyEchart from "./echart.vue";
import { options } from "./options/proposlType";
import { condoleOptions } from "./options/condole";
import { proposlResultOption } from "./options/proposlResult";
import { workCondoleOptions } from "./options/workCondole";
import { memberOption } from "./options/member";
import { sexOption } from "./options/sex";
import { activityOptions } from "./options/activity";
import { unionOptions } from "./options/union";
// import gsap from "gsap";

const tabIndex = ref(0);

const roll = ref();
const rollBox = ref();
const item = ref();
const proposlTypeOption = ref();
const condoleOption = ref();
const proposlOption = ref();
const workCondole = ref();
const member = ref();
const sex = ref();
const activity = ref();
const union = ref();

/** echarts图表的ref */
const proposlTypeRef = ref();
const condoleRef = ref();
const proposlResultRef = ref();
const workCondoleRef = ref();
const memberRef = shallowRef();
const sexRef = ref();
const activityRef = ref();
const unionRef = ref();

onMounted(() => {
  // gsap.fromTo(
  //   ".box",
  //   {
  //     width: "0%",
  //     // scale: 0,
  //     duration: 3,
  //   },
  //   {
  //     width: "100%",
  //     // scale: 1,
  //     duration: 3,
  //   }
  // );

  roll.value.style = `--scroll-height: -${
    roll.value.clientHeight - rollBox.value.clientHeight
  }px; --scroll-time: ${(item.value.length / 10) * 5}s`;
  let ob = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
    console.log(entries);
  });
  //

  ob.observe(item.value[item.value.length - 1]);
  proposlTypeOption.value = options();
  condoleOption.value = condoleOptions();
  proposlOption.value = proposlResultOption(type.map(i => i.itemText));
  workCondole.value = workCondoleOptions();
  member.value = memberOption();
  sex.value = sexOption();
  activity.value = activityOptions();
  union.value = unionOptions();

  // console.log(proposlTypeOption.value);

  // console.log(roll.value.clientHeight - rollBox.value.clientHeight);
  // console.log(rollBox.value.clientHeight);
  window.addEventListener("resize", onResize);
});

const onResize = () => {
  proposlTypeRef.value.resize();
  condoleRef.value.resize();
  proposlResultRef.value.resize();
  workCondoleRef.value.resize();
  memberRef.value.resize();
  sexRef.value.resize();
  activityRef.value.resize();
  unionRef.value.resize();
};

onUnmounted(() => {
  window.removeEventListener("resize", onResize);
});
const type = [
  {
    id: "1699653426454528001",
    dictId: "1698660396616450049",
    itemText: "改革发展",
    itemValue: "改革发展",
    description: null,
    sortOrder: 1,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:18:50",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
  {
    id: "1699653477641814017",
    dictId: "1698660396616450049",
    itemText: "教学科研",
    itemValue: "教学科研",
    description: null,
    sortOrder: 2,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:19:02",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
  {
    id: "1699653529500188674",
    dictId: "1698660396616450049",
    itemText: "人才队伍",
    itemValue: "人才队伍",
    description: null,
    sortOrder: 3,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:19:14",
    updateBy: "thinksoft",
    updateTime: "2023-09-07 13:19:37",
    status_dictText: "启用",
  },
  {
    id: "1699653589172551682",
    dictId: "1698660396616450049",
    itemText: "薪酬分配",
    itemValue: "薪酬分配",
    description: null,
    sortOrder: 4,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:19:28",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
  {
    id: "1699653675432607745",
    dictId: "1698660396616450049",
    itemText: "管理服务",
    itemValue: "管理服务",
    description: null,
    sortOrder: 5,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:19:49",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
  {
    id: "1699653728633159682",
    dictId: "1698660396616450049",
    itemText: "民生福利",
    itemValue: "民生福利",
    description: null,
    sortOrder: 6,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:20:02",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
  {
    id: "1699653802788454401",
    dictId: "1698660396616450049",
    itemText: "规章制度",
    itemValue: "规章制度",
    description: null,
    sortOrder: 7,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:20:19",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
  {
    id: "1699653865010954241",
    dictId: "1698660396616450049",
    itemText: "条件保障",
    itemValue: "条件保障",
    description: null,
    sortOrder: 8,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:20:34",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
  {
    id: "1699653912083628034",
    dictId: "1698660396616450049",
    itemText: "校园文化",
    itemValue: "校园文化",
    description: null,
    sortOrder: 9,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:20:45",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
  {
    id: "1699654045185671170",
    dictId: "1698660396616450049",
    itemText: "党建工作",
    itemValue: "党建工作",
    description: null,
    sortOrder: 10,
    status: 1,
    createBy: "thinksoft",
    createTime: "2023-09-07 13:21:17",
    updateBy: null,
    updateTime: null,
    status_dictText: "启用",
  },
];
</script>

<style scoped lang="less">
@font-face {
  font-family: "number";
  src: url("../../assets/echart/number.ttf");
}
section {
  padding: 0 10px;
  color: #fff;
}
.bar {
  position: relative;
  width: 100%;
  height: 310px;
  background: url("../../assets/echart/line.png") repeat;
  border: 1px solid rgba(25, 186, 139, 0.17);
  .title {
    color: white;
    font-size: 16px;
    padding: 10px 0 0 40px;
  }
}
.HeaderBordr::before {
  top: 0;
  left: 0;
  border-left: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
}
.HeaderBordr::after {
  top: 0;
  right: 0;
  border-right: 2px solid #02a6b5;
  border-top: 2px solid #02a6b5;
}
.footerBorder::after {
  top: 0;
  right: 0;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
}
.footerBorder::before {
  top: 0;
  left: 0;
  border-left: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
}
.borderP::before,
.borderP::after {
  position: absolute;
  width: 30px;
  height: 10px;
  content: "";
}
.border::after {
  left: 0;
  top: 0;
  border-top: 2px solid #02a6b5;
  border-left: 2px solid #02a6b5;
}
.title::before {
  bottom: 0;
  right: 0;
  border-right: 2px solid #02a6b5;
  border-bottom: 2px solid #02a6b5;
}

.setEchart::before,
.setEchart::after {
  position: absolute;
  width: 10px;
  height: 10px;
  content: "";
}
.footer {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 10px;
}
.content {
  width: 100%;
  height: 130px;
  background: rgba(101, 132, 226, 0.1);
  padding: 10px 20px;
  &-number {
    flex: 1;
    font-size: 50px;
    font-family: "number";
    text-align: center;
  }
  .divider {
    height: 40px;
    border-color: rgba(255, 255, 255, 0.2);
    margin: 0;
  }
  .border {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);
    height: 60px;
  }
  .title {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border: 1px solid rgba(25, 186, 139, 0.17);
    border-top: none;
    &-text {
      flex: 1;
      text-align: center;
      font-size: 16px;
    }
    .divider {
      height: 20px;
      border-color: rgba(255, 255, 255, 0.2);
      margin: 0;
    }
  }
}
.number-card {
  display: flex;
  margin-top: 20px;
  justify-content: space-around;
  .number-text:nth-child(1) {
    color: #ffadd2;
  }
  .number-text:nth-child(2) {
    color: #2db7f5;
  }
  .number-text:nth-child(3) {
    color: #87d068;
  }
  .number-text:nth-child(4) {
    color: #108ee9;
  }
  .number-text {
    padding-top: 35px;
    width: 180px;
    height: 207px;
    background: url("../../assets/echart/card.png") no-repeat;
    display: flex;
    flex-direction: column;
    &-item {
      text-align: center;
      font-size: 32px;
      font-family: "number";
      z-index: 99;
      .noNumber {
        font-size: 12px;
        font-style: normal;
        margin-left: 5px;
      }
    }
  }
}
.main {
  margin: 15px 0;
  width: 100%;
  height: 480px;
}
.rullData {
  position: relative;
  margin: 15px 0;
  width: 100%;
  height: 490px;
  background-size: cover;
  border: 1px solid rgba(75, 126, 254, 0.3);
  background-color: rgba(0, 0, 0, 0.2);
  background-image: url("../../assets/echart/line.png") repeat;
  background-repeat: no-repeat;
  background-size: contain;

  .title {
    width: 100%;
    height: 40px;
    font-size: 18px;
    padding-left: 20px;
    line-height: 40px;
    font-weight: bold;
    color: #88aaf3;
    background: url("../../assets/echart/Hometitlebg.png") no-repeat;
  }
  .list-tab {
    height: 35px;
    line-height: 35px;
    display: flex;
    padding: 0 20px;
    justify-content: space-around;
    color: #68d8fe;
    z-index: 3;
    background-color: rgba(255, 255, 255, 0.1);
  }
  .container {
    position: relative;
    /* 父容器需要有明确的高度 */
    height: 410px;
    width: 100%;
    overflow: hidden;
    .list {
      padding: 0;
      --scroll-height: 0;
      --scroll-time: 0;
      position: absolute;
      width: 100%;
      overflow: hidden;
      animation: scroll var(--scroll-time) linear infinite normal;
      z-index: 3;
      &:hover {
        animation-play-state: paused;
      }
    }
  }

  .item {
    z-index: 3;
    display: flex;
    padding: 0 20px;
    justify-content: space-around;
    width: 100%;
    /* 滚动的项目需要有具体的高度 */
    height: 30px;
    line-height: 30px;
    color: #61a8ff;
    list-style: none;
    font-size: 12px;
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
      color: #68d8ff;
      background: rgba(255, 255, 255, 0.2);
    }
  }
}
.select-tab {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 90px;
  &-item {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 70px;
    height: 100%;
    background-position: none center;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    z-index: 3;
    &:hover .text {
      color: #f2e555;
    }
    .text {
      color: #adf3e6;
    }
  }
}
.select-icon:nth-child(1) {
  background: url("../../assets/echart/news.png") no-repeat;
  &:hover {
    background: url("../../assets/echart/news-active.png") no-repeat;
  }
}
.select-icon:nth-child(2) {
  background: url("../../assets/echart/message.png") no-repeat;
  &:hover {
    background: url("../../assets/echart/message-active.png") no-repeat;
  }
}
.select-icon:nth-child(3) {
  background: url("../../assets/echart/proposal.png") no-repeat;
  &:hover {
    background: url("../../assets/echart/proposal-active.png") no-repeat;
  }
}

.select-icon:nth-child(4) {
  background: url("../../assets/echart/innovate.png") no-repeat;
  &:hover {
    background: url("../../assets/echart/innovate-active.png") no-repeat;
  }
}
.select-icon:nth-child(5) {
  background: url("../../assets/echart/events.png") no-repeat;
  &:hover {
    background: url("../../assets/echart/events-active.png") no-repeat;
  }
}
.select-icon:nth-child(6) {
  background: url("../../assets/echart/union.png") no-repeat;
  &:hover {
    background: url("../../assets/echart/union-active.png") no-repeat;
  }
}
.select-icon:nth-child(7) {
  background: url("../../assets/echart/leader.png") no-repeat;
  &:hover {
    background: url("../../assets/echart/leader-active.png") no-repeat;
  }
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    /* 需要滚动内容的总高度 */
    transform: translateY(var(--scroll-height));
  }
}
</style>
